<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="委托号">
					<u-input v-model="formData.contract_no" />
				</u-form-item>
				<u-form-item label="提单号">
					<u-input v-model="formData.bill_no" />
				</u-form-item> 
				<u-form-item label="制单日期"> 
					<picker mode="date"  @change="bindDateChange">
					      <div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div> 
					    </picker>
				</u-form-item> 

				<u-form-item  label="物流车队" label-width="160">
					<u-input type="select" :select-open="expresShow" v-model="formData.express.label"
						placeholder="请选择物流车队" @click="expresShow = true"></u-input>
				</u-form-item>

				
			</u-form>

			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSelAll">全选</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSubmit">提交</u-button>
			</view>
		</view>
		<view style="height: 500rpx;">

		</view>
		<view class="empty" style="margin-top: 50rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				  
					<view class="infoCon" @click="selectitem(item)">
						<view class="checkBox">
							<u-checkbox v-model="item.checked"></u-checkbox>
						</view> 
						<view>
							<view class="cellItem">
								<view class="label">
									提单号：
								</view>
								<view class="value">
									{{item.BILL_NO}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									委托号：
								</view>
								<view class="value">
									{{item.CONTRACT_NO}}
								</view>
							</view> 
							<view class="cellItem">
								<view class="label">
									作业方式：
								</view>
								<view class="value">
									<template v-if="item.WORK_WAY=='FOEI'">
										重出空回
									</template>
									<template v-if="item.WORK_WAY=='EOFI'">
										空出重回
									</template>
									<template v-if="item.WORK_WAY=='EOEI'">
										空出空回
									</template>
									<template v-if="item.WORK_WAY=='EITC'">
										空进
									</template>
									<template v-if="item.WORK_WAY=='FINO'">
										重进
									</template>
									<template v-if="item.WORK_WAY=='FONI'">
										重出
									</template>
									<template v-if="item.WORK_WAY=='EONI'">
										空出
									</template>
								</view>
							</view>
							
							<view class="cellItem">
								<view class="label">
									船公司：
								</view>
								<view class="labelTag">
									{{item.CONSIGN_NAM}} / {{item.CONSIGN_COD}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									有效期：
								</view>
								<view class="value">
									{{item.VALIDAT_DTE}}
								</view>
							</view> 
						</view> 
					</view>
			 
			</view>
		</view>   
		<u-select mode="single-column" :list="expressList" v-model="expresShow" @confirm="expressConfirm"
			value-name="WLGS" label-name="WLGS"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				}, 
				formData: { 
					contract_no:'',
					bill_no: '',    
					express: {
						label: '',
						value: ''
					}
				}, 
				expressList: [],
				truckname: uni.getStorageSync("nickName"),
				list: [],
				expresShow:false,
				isCheckAll: false, 
				flag: false,
				timeIndex:0,
				anyDate:this.current_date()
			};
		},
		onLoad() {
			this.getOptions()
		},
		methods: {
			bindDateChange (e) {
				  console.log(e)
				  this.anyDate = e.detail.value
				  this.timeIndex = 4
				},
			getOptions() { 

				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/m6Q6ZYmpLP7fYgR',
					method: "get",
					success: (res) => {
						this.expressList = res.data.rows
					}
				}) 
				this.getList()
			},
			getList() {
				if (this.flag) return
				 
				if (this.formData.contract_no == '' && this.formData.bill_no == '')
					return uni.showToast({
						title: '请输入委托号或者提单号',
						icon: 'none'
					}) 
				this.flag = true
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/YSmvEibrwwwiSS3?current_date='+this.anyDate+'&uname=' + this
						.truckname +'&wtno=' + this.formData.contract_no + '&tidanno='+this.formData.bill_no,
					method: "get",
					success: (res) => {
						this.flag=false;
						this.isCheckAll = false
						res.data.rows.forEach((item) => {
							item.checked = false
						})
						this.list = res.data.rows
						uni.hideLoading()
					}
				});
			},  
			expressConfirm(e) {
				this.formData.express = e[0] 
			},
			onSearch() { 
				this.getList()
			},
			selectitem(item) {
				if (item.checked == false) {
					item.checked = true
				} else {
					item.checked = false
				}
			},
			tapSelAll() {
				if (this.isCheckAll) {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
					this.list.forEach((item) => {
						item.checked = true
					})
				}
			}, 
			tapSubmit() {
				if (this.flag) return
				let checkList = []
				this.list.forEach((item) => {
				
					if (item.checked ) {
						checkList.push({
							workway:"1",
							carcode: this.formData.carCode.label,
							zhipaipeoper: this.truckname,
							truckerno: this.formData.phone,
							id: item.ID
						})
					}
				})

				if (checkList.length == 0 || this.list.length == 0) return uni.showToast({
					title: '请选择数据',
					icon: 'none'
				}) 
				this.flag = true 
				if(this.formData.express.label==''){
					this.flag = false
					return uni.showToast({
						title: '请选择物流车队',
						icon: 'none'
					})
				}
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/LcZD7SeNHNhZIge',
					data: {
						List: JSON.stringify(checkList)
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "POST",
					success: (res) => {
						this.flag = false
						uni.showToast({
							title: '提交成功'
						})  
						setTimeout( () => {
						   this.getList()
						}, 1000)
					},
					fail() {
						this.flag = false
					}
				}) 
			},
			current_date() { 
			  var nowDate = new Date();
			  let date = {
				year: nowDate.getFullYear(),
				month: (nowDate.getMonth() + 1).toString().padStart(2,0),
				day: nowDate.getDate().toString().padStart(2,0)
			  };
			  // console.log(date);
			  let systemDate = date.year + "-" + date.month + "-"+date.day;
			  return systemDate;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	page {
		background-color: #F2F1F9;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}

	.listCon {

		.listItem {
			margin-left:10px;
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;

			

			.infoCon {
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}
				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7; 
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}
				.checkBox {}
			}
		}
	}
</style>
